import { createElement, FC, PropsWithChildren } from "react";
import { ConfigProvider, theme } from "antd";
import type { ConfigProviderProps } from "antd/es/config-provider"
import type { AntProLayoutProps } from "vendor/layouts/AntProLayout";
import type { ITheme as ProTableTheme } from "vendor/components/pro-table";
import { antDarkToken } from "./baseToken";

interface CustomToken {
    bodyBgColor?: string, //  body背景颜色
}

export type IThemeToken = ConfigProviderProps["theme"]["token"] & {
    custom: CustomToken
    antProLayoutToken: AntProLayoutProps["token"],
    proTableToken: ProTableTheme,
};

/**
 * 主题token hook
 */
export const useThemeToken = () => {
    const { token } = theme.useToken();
    // @ts-ignore
    const themeToken: IThemeToken = token;
    return {themeToken}
}

export const ThemeConfigProvider: FC<PropsWithChildren<{token: IThemeToken}>> = ({token,children}) => createElement(ConfigProvider, {
    theme:{token}
}, children);


/**
 * 获取主题token
 */
export const getThemeTokenList = () => ({
    default: {
        label: "浅色系",
        token: defaultToken,
    },
    navyBlue:{
        label: "深蓝系",
        token: navyBlueToken,
    },
    dark: {
        label: "暗黑系",
        token: darkToken,
    }
})

/**
 * 默认颜色
 */
const defaultToken: IThemeToken = (() => {
    // 1. 重写antd中的token
    const rewriteToken: ConfigProviderProps["theme"]["token"] = {
        fontSize: 14,
    }

    // 2. 自定义theme token
    const customToken: CustomToken = {}

    // 3.重写pro-layout组件中的token
    const activeBgColor = "#1b8ce7";
    const antProLayoutToken: AntProLayoutProps["token"] = {
        header: {
            colorTextMenuSelected: '#fff',
            colorBgMenuItemSelected: activeBgColor,
        },
        sider: {
            colorTextMenuSelected: '#dfdfdf',
            colorBgMenuItemSelected: activeBgColor,
        },
    }

    // 4. pro-table组件托乎提
    const proTableToken:ProTableTheme = {
        headerHeight: 40,
        footerHeight: 40,
        headerBgColor: "#fafafa",
        headerBoxShadow: "0px 1px 3px #333333",
        footerBgColor: "#fafafa",
        footerBoxShadow: "0px 1px 3px #333333",
    }

    return {
        // 重写antd中定义的token主题色
        ...rewriteToken,
        custom: customToken,
        antProLayoutToken,
        proTableToken,
    };
})();

/**
 * 深蓝色系列
 */
const navyBlueToken: IThemeToken = (() => {
    // 1. 重写antd中的token
    const rewriteToken: ConfigProviderProps["theme"]["token"] = {
        fontSize: 14,
        // **************** 品牌色 ****************
        colorPrimaryBg: "#2a3850",          // 浅色背景色

        // **************** 中性色 ****************
        // 描边
        colorBorder: "#314f72",            // 边框色
        colorBorderSecondary: "#314f72",   // 二级边框色

        // 背景
        colorBgContainer: "#243d5d",    // 组件容器背景色
        colorBgElevated: "#243d5d",     // 浮层容器背景色
    }

    // 2. 自定义theme token
    const customToken: CustomToken = {
        bodyBgColor: "#38476e", //  body背景颜色
    }

    // 3.重写pro-layout组件中的token
    const bgColor = rewriteToken.colorBgContainer;
    const activeBgColor = "#1b8ce7";
    const antProLayoutToken: AntProLayoutProps["token"] = {
        header: {
            colorBgHeader: bgColor,
            colorHeaderTitle: '#fff',
            colorTextMenu: '#dfdfdf',
            colorTextMenuSecondary: '#dfdfdf',
            colorTextMenuSelected: '#fff',
            colorBgMenuItemSelected: activeBgColor,
            colorTextMenuActive: 'rgba(255,255,255,0.85)',
            colorTextRightActionsItem: '#dfdfdf',
        },
        colorTextAppListIconHover: '#fff',
        colorTextAppListIcon: '#dfdfdf',
        sider: {
            /* 折叠标识相关的颜色*/
            colorBgCollapsedButton: "#39649b",
            colorTextCollapsedButtonHover: "#fff",
            colorTextCollapsedButton: "#242424",
            colorMenuBackground: bgColor,
            colorMenuItemDivider: '#dfdfdf',
            colorBgMenuItemHover: '#f6f6f6',
            colorTextMenu: '#fff',
            colorTextMenuSelected: '#dfdfdf',
            colorTextMenuActive: "#dfdfdf",
            colorBgMenuItemSelected: activeBgColor,
            /**
             * menu 顶部 title 的字体颜色
             */
            colorTextMenuTitle: "#fff",
            colorTextSubMenuSelected: "#fff",
        },
        bgLayout: customToken.bodyBgColor, // layout背景颜色
    }

    // 4. pro-table组件托乎提
    const proTableToken = {
        headerHeight: 40,
        footerHeight: 40,
        headerBgColor: rewriteToken.colorBgContainer,
        headerBoxShadow: "0px 1px 3px #333333",
        footerBgColor: rewriteToken.colorBgContainer,
        footerBoxShadow: "0px 1px 3px #333333",
    }

    return {
        ...antDarkToken,
        // 重写antd中定义的token主题色
        ...rewriteToken,
        custom: customToken,
        antProLayoutToken,
        proTableToken,
    };
})();



/**
 * 暗黑色系列
 */
const darkToken: IThemeToken = (() => {
    // 1. 重写antd中的tokenfontSize: 14,
    const rewriteToken: ConfigProviderProps["theme"]["token"] = {
        fontSize: 14,
        // 背景
        colorBgContainer: antDarkToken.colorBgContainer,    // 组件容器背景色
    }

    // 2. 自定义theme token
    const customToken: CustomToken = {
        bodyBgColor: "#232222", //  body背景颜色
    }

    // 3.重写pro-layout组件中的token
    const bgColor = rewriteToken.colorBgContainer;
    const activeBgColor = "#1b8ce7";
    const antProLayoutToken: AntProLayoutProps["token"] = {
        header: {
            colorBgHeader: bgColor,
            colorHeaderTitle: '#fff',
            colorTextMenu: '#dfdfdf',
            colorTextMenuSecondary: '#dfdfdf',
            colorTextMenuSelected: '#fff',
            colorBgMenuItemSelected: activeBgColor,
            colorTextMenuActive: 'rgba(255,255,255,0.85)',
            colorTextRightActionsItem: '#dfdfdf',
        },
        colorTextAppListIconHover: '#fff',
        colorTextAppListIcon: '#dfdfdf',
        sider: {
            /* 折叠标识相关的颜色*/
            colorBgCollapsedButton: "#39649b",
            colorTextCollapsedButtonHover: "#fff",
            colorTextCollapsedButton: "#242424",
            colorMenuBackground: bgColor,
            colorMenuItemDivider: '#dfdfdf',
            colorBgMenuItemHover: '#f6f6f6',
            colorTextMenu: '#fff',
            colorTextMenuSelected: '#dfdfdf',
            colorTextMenuActive: "#dfdfdf",
            colorBgMenuItemSelected: activeBgColor,
            /**
             * menu 顶部 title 的字体颜色
             */
            colorTextMenuTitle: "#fff",
            colorTextSubMenuSelected: "#fff",
        },
        bgLayout: customToken.bodyBgColor, // layout背景颜色
    }

    // 4. pro-table组件托乎提
    const proTableToken = {
        headerHeight: 40,
        footerHeight: 40,
        headerBgColor: rewriteToken.colorBgContainer,
        headerBoxShadow: "0px 1px 3px #333333",
        footerBgColor: rewriteToken.colorBgContainer,
        footerBoxShadow: "0px 1px 3px #333333",
    }

    return {
        ...antDarkToken,
        // 重写antd中定义的token主题色
        ...rewriteToken,
        custom: customToken,
        antProLayoutToken,
        proTableToken,
    };
})();










